<template>
  <app-card>
    <template #header>
      <el-input
          v-model="listParams.username"
          placeholder="请输入群ID"
          clearable
          @clear="loadList"
          style="width: 300px"
      >
        <template #append>
          <el-button @click="loadList">
            <el-icon>
              <search/>
            </el-icon>
          </el-button>
        </template>
      </el-input>
      <el-button
          type="danger"
          @click="batchDelete"
      >
        <el-icon>
          <delete/>
        </el-icon>
        批量删除
      </el-button>
    </template>
    <el-table
        :data="list"
        v-loading="listLoading"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
    >
      <el-table-column fixed="left" type="selection" width="55"/>
      <el-table-column align="center" :show-overflow-tooltip="true" min-width="120px" prop="groupId" label="群ID"/>
      <el-table-column align="center" width="120px" prop="nickName" label="昵称"/>
      <el-table-column align="center" width="110px" prop="avatar" label="头像">
        <template #default="{row}">
          <app-avatar :size="40" :src="row.avatar"></app-avatar>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150px" prop="from" label="账号"/>
      <el-table-column align="center" width="90px" prop="status" label="消息类型">
        <template #default="{row}">
          <el-tag effect="dark" v-if="row.type===0">文字</el-tag>
          <el-tag effect="dark" v-if="row.type===1" type="info">图片</el-tag>
          <el-tag effect="dark" v-if="row.type===2" type="danger">视频</el-tag>
          <el-tag effect="dark" v-if="row.type===3" type="success">语音</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="170px" prop="createTime" sortable="custom" label="消息时间">
        <template #default="{row}">
          <el-tag type="info">{{ formatDate(row.createTime) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" :show-overflow-tooltip="true" min-width="170px" prop="message" label="消息内容"/>
    </el-table>
    <app-pagination
        v-model:page="listParams.pageNum"
        v-model:limit="listParams.pageSize"
        :list-count="listCount"
        :load-list="loadList"
        :disabled="listLoading"
    />
  </app-card>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus'
import {IChatMessage} from "@/api/types/chat";
import { deleteMessageByGroup, queryMessageByGroup} from "@/api/message";
import {IListParams} from "@/api/types/common";
import {formatDate} from "@/utils/constants";

const list = ref<IChatMessage[]>([]);
const listCount = ref(0);
const listLoading = ref(false);
const listParams = reactive<IListParams>({
  pageNum: 1,
  pageSize: 10,
  username: ''
});
const selectionItems = ref<IChatMessage[]>([]);

onMounted(() => {
  loadList();
});

const loadList = async () => {
  listLoading.value = true;
  const data = await queryMessageByGroup(listParams).finally(() => {
    listLoading.value = false;
  });
  list.value = data.rows;
  listCount.value = data.total;
};

// 选择数据
const handleSelectionChange = (val: IChatMessage[]) => {
  selectionItems.value = val;
};
// 排序
const handleSortChange = ({prop, order}: {
  prop: string; order: string;
}) => {
  listParams.sortField = prop;
  listParams.sortOrder = order
  loadList();
};

const handleDelete = async (id: any) => {
  await deleteMessageByGroup(id)
  ElMessage.success('删除成功！')
  await loadList()
}

// 批量删除
const batchDelete = async () => {
  if (!selectionItems.value.length) {
    return ElMessage.warning('请选择消息!');
  }
  ElMessageBox.confirm(
      '是否永久删除该消息！',
      '提醒', {confirmButtonText: '确认', cancelButtonText: '取消',})
      .then(async () => {
        const ids = selectionItems.value.map(i => i.id).join(",")
        await handleDelete(ids)
      })

};


</script>

<style lang="scss" scoped>
</style>
